import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import _ from 'underscore';
import { ajax } from '../helper/helper';
import moment from 'moment';
import Wrapper from '../wrapper';
import { LineChart, BarChart } from '../charts/charts';
import { DownLoad } from '../charts/table';


class Dashboard extends Component {
	constructor(props) {
		super(props);

		this.chartMap = [
			{
				title: '最近30天线索收集',
				width: 12,
				height: 300,
				datePick: true,
				row: 1,
				keyMap: {
					count: '潜客增加数'
				},
				getData(param, callback) {
					ajax({
						type: 'GET',
						url: '/dashboard/charts',
						success: function (data) {
							var get_data = JSON.parse(data);
							if (get_data.success) {
								callback(get_data.data);
							}
						}
					});
				},
				isLocked: true
			},
		]
		this.state = {
			contentData: [],

		}
	}

	refresh() {
		$("[data-toggle='tooltip']").tooltip();
	}
	render() {
		var contentData = this.state.contentData || [],
			rows = _.values(_.groupBy(this.chartMap, 'row')),
			refresh = this.refresh.bind(this);
		return (
			<Wrapper currentPage="dashboard">
				<div>
					<div className="content-header">
						<h4>开始使用线索收集管理你的数据</h4>
					</div>
					<div className="content">
						<div className="row">
							<div className="col-md-12 col-xs-12">
								<div className="text-center panel panel-default padding">
									<div className="panel-body div1">
										<div className="row">
											<div className="col-md-4 margin1">
												<div className="border1 ">

													<h5>1、创建线索收集 <span className="glyphicon glyphicon-question-sign icon" onMouseLeave={refresh} data-toggle="tooltip" data-placement="top" title="设置自己想要收集的信息和样式"></span></h5>
													<a href="/create" className="btn btn-primary btn-flat">立即创建</a>
												</div>
											</div>
											<div className="col-md-4 margin1" >
												<div className="border1">
													<h5>
														2、查看线索 <span className="glyphicon glyphicon-question-sign icon" onMouseLeave={refresh} data-toggle="tooltip" data-placement="top" title="查看收集到的线索"></span>
													</h5>
													<a href="/leadflows" className="btn btn-primary btn-flat" >立即查看</a>
												</div>
											</div>
											<div className="col-md-4 margin1">
												<div className="border1">
													<h5>3、全局设置 <span className="glyphicon glyphicon-question-sign icon" onMouseLeave={refresh} data-toggle="tooltip" data-placement="top" title="设置将收集到的线索发送到邮箱"></span></h5>
													<a href="/settings" className="btn btn-primary btn-flat">立即设置</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					{rows.map(function (row, index) {
						var height = _.max(_.pluck(row, 'height'));

						return <div key={index}>
							{row.map(function (chart, index2) {
								chart.height = height;
								return <ReactReports key={index2} options={chart} />
							})}
						</div>
					})}
				</div>
			</Wrapper>
		)
	}
};

/*报表入口*/
class ReactReports extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: null,
			type: 'line',
			startDate: moment().subtract(29, 'days').format('YYYY-MM-DD'),
			endDate: moment().format('YYYY-MM-DD'),
			isPending: false
		}
	}
	/*shouldComponentUpdate:function(nextProps,nextState){
		return JSON.stringify(nextState.data)!=JSON.stringify(this.state.data)
	},*/
	componentDidMount() {
		this.getData()
	}
	changeDate(start, end) {
		var self = this,
			options = this.props.options,
			state = this.state;

		this.setState({
			startDate: start.format('YYYY-MM-DD'),
			endDate: end.format('YYYY-MM-DD')
		}, function () {
			self.getData()
		})
	}
	getData() {
		// debugger
		var self = this,
			options = this.props.options,
			state = this.state;

		if (options.getData) {
			this.setState({
				isPending: true
			}, function () {
				options.getData(state, function (data) {
					self.setState({
						data: data,
						isPending: false
					})
				})
			})
		}
	}
	changeDisplay(val) {
		this.setState({
			type: val
		});

	}
	getQuery() {
		return {
			query: {}
		}
	}

	render() {
		var options = this.props.options,
			data = this.state.data,
			type = this.state.type,
			isPending = this.state.isPending,
			getData = this.getData,
			changeDisplay = this.changeDisplay.bind(this);
		return (
			<div>
				<div className="content-header">
					<h4>销售线索收集近30天</h4>
				</div>
				<div className="content">
					<div className="row">
						<div className="col-md-12 col-xs-12">
							<div className="col-md-12 col-xs-12">
								<div className="box box-primary">
									<div className="box-header">

										<DownLoad downloadUrl='/dashboard/download' getQuery={this.getQuery.bind(this)} />

										<div className="btn-group pull-right" style={{ marginRight: 10 }}>
											<button className={'btn btn-sm' + (type == 'line' ? ' btn-default active' : ' btn-default')} onClick={() => { changeDisplay('line') }}><i className="fa fa-line-chart"></i></button>
											{/*<button className={'btn btn-default' + (type == 'pie' ? ' active' : '')} onClick={() => { changeDisplay('pie') }}><i className="fa fa-pie-chart"></i></button>*/}
											<button className={'btn btn-sm' + (type == 'bar' ? ' btn-default active' : ' btn-default')} onClick={() => { changeDisplay('bar') }}><i className="fa fa-bar-chart"></i></button>
										</div>
									</div>
									<div className="box-body">
										<div></div>
										<div className="chart" style={{ height: options.height }}>
											{(function () {
												if (!isPending) {
													if (data) {
														switch (type) {
															case 'line':
																return <LineChart options={options} data={data} />;
															case 'pie':
																return <StackedBarChart options={options} data={data} />;
															case 'bar':
																return <BarChart options={options} data={data} />;

														}
													}
												}
											})()}
										</div>
									</div>
									{isPending ? <div className="overlay overlay-lock">
										<i className="fa fa-refresh fa-spin"></i>
									</div> : ''}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
};

ReactDOM.render(
	<Dashboard />,

	document.getElementById('dashboard')
);